<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
        ,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0>
    <!-- 引入我们的css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入我们的首页css文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
    <!-- 顶部 -->
    <header class="app">
        <ul>
            <li>
                <img src="images/menu.jpg" alt="">
            </li>
            <li>
                欢迎Welcome!<br>
                <b>Cangzhou Technician College</b>
            </li>
            <li>
                <img src="images//people.jpg" alt="">
            </li>
        </ul>
    </header>
    <!-- 焦点图 -->
    <div class="Focus-picture">
        <img src="images/main-left.png" alt="">
    </div>
    <!-- 搜索框 -->
    <div class="search">
        <img src="images/magnifier.png" alt="">
        <p>Search(建设中...)</p>
    </div>
    <!-- 课程选择标题 -->
    <div class="Courseselection">
        <p>如何 选择 所需课程 ？</p>
        <p>我们的课程已经罗列在下方菜单中，根据实际需要进行点击选择！注意标题中的班级和专业名称，不要纠结标题中的版数等字样！！诸如''第几版...''</p>
    </div>
    <!-- 课程选择目录 -->
    <!-- 1.机械基础 -->
    <div class="machinery-foundation">
        <ul>
            <li>
                <img src="images/放大镜.png" alt="">
            </li>
            <li>
                <p>机械基础（第四版）</p>
                <p>技师学院25春汽修班级专用</p>
            </li>
        </ul>
    </div>
    <!-- 2.极限配合 -->
    <div class="technical">
        <ul>
            <li>
                <img src="images/讲课.png" alt="">
            </li>
            <li>
                <p>极限配合与技术测量（第五版）</p>
                <p>技师学院24机器人班级专用</p>
            </li>
        </ul>
    </div>
    <!-- 机械制图 -->
    <div class="machine-drawing">
        <ul>
            <li>
                <img src="images/课本.png" alt="">
            </li>
            <li>
                <p>机械制图（第八版）</p>
                <p>技师学院25春机电班级专用</p>
            </li>
        </ul>
    </div>
    <!-- 推荐 -->
    <div class="recommend">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>